<template>
    <n-card  >
        <n-grid :cols="12" item-responsive responsive="screen">
            <n-gi span="12 m:8 l:6" offset="0 m:2 l:3">
                <div ref="dateCountRef" style="width:100%;height:200px;"></div>
            </n-gi>
            <n-gi span="12 m:8 l:6" offset="0 m:2 l:3">
                <div ref="studentCountRef" style="width:100%;height:250px;"></div>
            </n-gi>
            <n-gi span="12 m:8 l:6" offset="0 m:2 l:3">
            <n-collapse>
                <n-collapse-item title="未完成学生" name="1">
                    <n-table :single-line="false" :striped="true">
                        <thead>
                            <tr>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>班级</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="student in discussCount['unFinishStudentList']">
                                <td>
                                    {{student.SID}}
                                </td>
                                <td>
                                    {{student.studentName}}
                                </td>
                                <td>
                                    {{student.claseName}}
                                </td>
                            </tr>
                        </tbody>
                    </n-table>
                </n-collapse-item>
              </n-collapse>
              </n-gi>
        </n-grid>
    </n-card>
</template>
<script lang="ts" setup>
import { countDiscuss } from '@/api/teacher/discuss';
import { onMounted, reactive, ref } from 'vue';
import * as echarts from 'echarts'

const props = defineProps({
    discussID: {
        type: Number,
        required: true
    }
})

const discussCount: any = ref({});
const dateCountRef =ref();
const studentCountRef = ref();

const dateCountOption = reactive({
    title: {
        text: '讨论流量统计',
        left:'center'
    },
  xAxis: {
    name:'日期',
    type: 'category',
    boundaryGap: false,
    data: ['']
  },
  yAxis: {
    name:'讨论数',
    type: 'value',
    minInterval: 1
  },
  series: [
    {
      data: [0],
      type: 'line',
      areaStyle: {},
      //smooth: true,
    }
  ]
});

const discussChartOption = reactive({
    title: {
        text: '讨论活跃度排行',
        left:'center',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: []
    },
    series: [
        {
            name: '发言数',
            type: 'bar',
            data: []
        }
    ]
});

onMounted(
    async () => {
        discussCount.value = await countDiscuss({ discussID: props.discussID });
        // console.log(discussCount.value);
        dateCountOption.series[0].data= [];
        dateCountOption.xAxis.data=[];

        for(let key in discussCount.value.dateCount){
            dateCountOption.xAxis.data.push(key);
            dateCountOption.series[0].data.push(discussCount.value.dateCount[key]);
        }

        let studentName:any = [];
        let studentCount:any = [];
        discussCount.value.studentCount.forEach(element => {
            studentName.push(element['SID']+' '+element['name']);
            studentCount.push(element['count']);
        });
        discussChartOption.yAxis.data = studentName.reverse().slice(0,5);
        discussChartOption.series[0].data = studentCount.reverse().slice(0,5);

        //console.log(discussCount.value['unFinishStudentList']);
        let dateChart = echarts.init(dateCountRef.value);
        let studentChart =echarts.init(studentCountRef.value);

        dateChart.setOption(dateCountOption);
        studentChart.setOption(discussChartOption);

        window.addEventListener("resize", (() => {
        setTimeout(() => { // 避免多图同时加载卡顿
            dateChart.resize();
        }, 200);
        setTimeout(() => { // 避免多图同时加载卡顿
            studentChart.resize();
        }, 200);
    }));
    }
);
</script>